<template>
	<view>
		<!-- 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用
		 
		1. new_index.nvue、index.nvue这两个是App页面
		 
		2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）
		 
		3. 请各位大神多多留手，我已经把请求内存开到最大了
		 
		4. 视频 id 切记是字符串类型 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 -->

		<!-- #ifdef H5 -->
		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
			:vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false"
			:duration="duration">
			<swiper-item v-for="(list,index) in dataList" :key="index">
				<view v-if="Math.abs(k-index)<=1" @longpress="longpress(index)"  @touchend="handleTouchEnd">
					<view>
						<!-- 
						1.v-if：用于控制视频在节点的渲染数
						2.muted的默认值是 false，代表默认是禁音视频的
						3.http-cache默认开启视频缓存
						4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
						5.show-loading：这里默认去掉播放转圈的标志
						v-if="Math.abs(k-index)<=1"
						 -->
						<video v-if="isShow" :id="list._id+''+index" :loop="true" :controls="false"
							:http-cache="true" :page-gesture="false" :show-fullscreen-btn="false" :show-loading="false"
							:show-center-play-btn="false" :enable-progress-gesture="false" :src="list.src" @ended="ended"
							@click.stop="tapVideoHover(list.state,$event)" @timeupdate="timeupdate($event,index)"
							:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: -1;'"
							:poster="list.image"></video>
						<!-- 
						1.这里是封面（方案二）：这里的封面可以自定义。
						2.也在代码中做了批注，两种方案可以共存，不会相互影响。
						-->
						<image v-if="!list.playIng" :src="list.src+'?x-oss-process=video/snapshot,t_100,f_jpg'"
							:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; position: absolute;'" mode="aspectFit">
						</image>
					</view>
					<!-- 播放状态：pause 的时候就会暂停 -->
					<view class="videoHover" @click.stop="tapVideoHover(list.state,$event)"
						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'">
						<image v-if="list.state=='pause'" class="playState" src="@/static/images/play.png"></image>
					</view>
					
					<view class="userInfo">
						<cover-view class="iconListClass" @click.stop="handleLikes(list.id, index)">
							<cover-image v-if="list.like === 1" src="../../static/images/play_icon/ic_xin_red@2x.png"
								style="width: 64rpx; height: 64rpx;" />
							<cover-image v-else src="../../static/images/play_icon/ic_xin_white@2x.png"
								style="width: 64rpx; height: 64rpx;" />
							<!-- <u-icon name="heart-fill" size="38" :color="item.like === 1 ? '#C60412' : '#fff'"></u-icon> -->
							<cover-view class="like_box">
								<text class="likeNum">{{ list.likes }}</text>
							</cover-view>
						</cover-view>
						<cover-view @click.stop="handleCollect(list.id, index)" class="iconListClass">
							<!-- <u-icon name="star-fill" size="38" :color="item.favor === 1 ? '#C60412' : '#fff'"></u-icon> -->
							<cover-image v-if="list.favor === 1" src="../../static/images/play_icon/ic_xing_red@2x.png"
								style="width: 64rpx; height: 64rpx;" />
							<cover-image v-else src="../../static/images/play_icon/ic_xing_white@2x.png"
								style="width: 64rpx; height: 64rpx;" />
							<cover-view class="like_box">
								<text class="likeNum">{{ list.dramVideo.favorites }}</text>
							</cover-view>
						</cover-view>
						<cover-view class="iconListClass" @click="
										openVideoDetail(list.dramVideo.id, list.dramVideo.title, list.dramVideo.image, list.dramVideo.description)
									">
							<cover-image src="../../static/images/play_icon/ic_quanji@2x.png" style="width: 64rpx; height: 64rpx;" />
							<cover-view class="like_box">
								<text class="likeNum">{{ list.dramVideo.episodes }}</text>
							</cover-view>
						</cover-view>

						<cover-view class="iconListClass">
							<cover-image src="../../static/images/play_icon/ic_fenxiang_diasble@2x.png"
								style="width: 64rpx; height: 64rpx;" />
							<!-- <cover-view>
								<text class="context">{{ item.shares }}</text>
							</cover-view> -->
						</cover-view>
					</view>
					<!-- 最底下的文字部分 -->
					<view class="content">
						<view class="formation" v-if="speedNum">
							<view class="speedNumBox">
								<text @click.stop="handleSetSpeedRate(0.5)"
									:class="[0.5 == speedRate?activeClass:errorClass,'number']">0.5x</text>
								<text @click.stop="handleSetSpeedRate(1)"
									:class="[1 == speedRate?activeClass:errorClass,'number']">1.0x</text>
								<text @click.stop="handleSetSpeedRate(1.25)"
									:class="[1.25 == speedRate?activeClass:errorClass,'number']">1.25x</text>
								<text @click.stop="handleSetSpeedRate(1.5)"
									:class="[1.5 == speedRate?activeClass:errorClass,'number']">1.5x</text>
								<text @click.stop="handleSetSpeedRate(2.0)"
									:class="[2.0 == speedRate?activeClass:errorClass,'number']">2.0x</text>
							</view>
						</view>
						<text class="userName">{{list.dramVideo.title}}</text>
						<!-- <text class="words" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.dramVideo.subtitle}}</text> -->
					</view>
					<!-- 进度条 -->
					<view style="position: absolute; bottom: 10px; display: flex;flex-direction: column;"
						:style="'padding-left: '+ (windowWidth * 0.05) +'px;'">
						<view v-if="k === index" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
							:style="'width: '+ (windowWidth - (windowWidth*0.10)) +'px; margin-left: '+ '0px;'">
							<!-- 不拖动情况下 -->
							<view>
								<!-- 1.底部背景进度条 -->
								<view
									:style="'width: '+ (windowWidth - (windowWidth*0.10)) +'px; margin-top: 18px; height: 5px; border-radius: 10px; background-color: #999999; opacity: 0.6;'">
									<!-- 2.播放的进度条 -->
									<view v-if="!isTouch"
										:style="'width: '+ ((windowWidth - (windowWidth*0.10)) * progressBarPercent) +'px; position: absolute; height: 5px; border-radius: 10px; background-color: #e6e4e7; '">
									</view>
									<!--  -->
									<view v-if="isTouch"
										:style="'width: '+ (videoStartPositon + addPositon) +'px; position: absolute; height: 5px; border-radius: 10px; background-color: #e6e4e7; '">
									</view>
								</view>
							</view>
						</view>

						<view class="description_text">
							<view class="duration_time">
								<text class="text">{{secondsToTime(list.duration)}}/</text>
								<text class="in text">{{secondsToTime(currentTime) || '00:00'}}</text>
							</view>
							<view @click.stop="showSpeedRate">
								<text class="text">x{{speedRate}}</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- #endif -->
	</view>
</template>

<script>
	// import userList from '../new_index/data.js'//这个是假数据
	// let audo = {}
	export default {
		data() {
			return {
				activeClass: 'active',
				errorClass: 'noActive',
				speedRate: 1,
				speedNum: false,
				currentTime: 0,
				windowWidth: 0,
				windowHeight: 0,
				platform: '',
				model: '',
				deleteHeight: 0,
				dataList: [],
				k: 0,
				oldVideo: '',
				voice: '',
				timeout: '',
				current: 0,
				boxStyle: { //视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},

				videoID: '',
				isShow: false,

				showPlay: false, //转轮显示控制
				rotates: 0, //转轮旋转角度
				rotateTime: '', //转轮递归事件控制
				xrotats: '',

				mpcleartime: '',

				isClick: false,

				changeTimeout: '',
				mptime: 0,
				mpstartTime: 0,

				duration: 500,
				// -- 进度条相关 -- start
				videoStartPositon: 0,
				progressBarPercent: 0,
				touchStartPosition: 0,
				addPositon: 0,
				timeduration: 0,
				isTouch: false,
				// -- 进度条相关 -- end
			}
		},
		components: {},
		watch: {
			async k(k, old_k) {
				console.log(k, old_k, 'debugger')
				this.progressBarPercent = 0
				// #ifndef MP
				this.clearToTime()
				// #endif
        console.log(123,'debugger')
				this.isShow = false
				this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
				this.dataList[old_k].isplay = true
				this.dataList[old_k].state = 'pause'
				console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k]._id + '' + old_k)
        uni.createVideoContext(this.dataList[old_k]._id+''+old_k, this).pause()
				// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
				uni.createVideoContext(this.dataList[old_k]._id + '' + old_k, this)
					.stop() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k]._id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
				console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～') //提示
        
				this.dataList[k].state = 'play'
				this.isShow = true
				this.xrotats = setTimeout(() => {
					this.showPlay = true
					// #ifndef MP
					this.rotateX()
					// #endif
				}, 200)
				// #ifdef H5
				this.dataList[k].isplay = true
				// audo.src = this.dataList[k].src
				if (this.isClick) {
					setTimeout(() => {
						if (typeof WeixinJSBridge === 'undefined') {
							setTimeout(() => {
								// audo.play()
								uni.createVideoContext(this.dataList[k]._id + '' + k, this).seek(0)
								uni.createVideoContext(this.dataList[k]._id + '' + k, this).play()
								setTimeout(() => {
									this.dataList[k].playIng = true
								}, 650)
							}, 500)
						} else {
							WeixinJSBridge.invoke('getNetworkType', {}, e => {
								setTimeout(() => {
									// audo.play()
									uni.createVideoContext(this.dataList[k]._id + '' + k, this).seek(0)
									uni.createVideoContext(this.dataList[k]._id + '' + k, this).play()
									setTimeout(() => {
										this.dataList[k].playIng = true
									}, 850)
								}, 200)
							})
						}
					}, 200)
				} else {
					// audo.pause()
					this.dataList[k].state = 'pause'
					uni.createVideoContext(this.dataList[k]._id + '' + k, this).seek(0)
					uni.createVideoContext(this.dataList[k]._id + '' + k, this).pause()
				}
				// #endif
				var p = k + 1
				console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p]._id + '' + p)
			}
		},
		onLoad() {
			// audo = uni.createInnerAudioContext()
			this.get()
			// audo.loop = true
			// console.log(audo, 'uniapp createInnerAudioContext 没有声音')
			this.platform = uni.getSystemInfoSync().platform
			this.model = uni.getSystemInfoSync().model
			var model = this.model
			if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !==
					'iPhone8')) {
				this.deleteHeight = 0 //有 tabbar的 修改这里可以改变视频高度
			}
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			this.boxStyle.height = this.windowHeight - this.deleteHeight //有 tabbar的 修改这里可以改变视频高度
			// this.get()
		},
		onShow() {
			console.log('回到前台')
			if (this.dataList.length !== 0) {
				// #ifdef H5
				if (this.isClick) {
					this.dataList[this.k].state = 'play'
					uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
					// audo.play()
				}
				// #endif
			}
		},
		onHide() {
			// #ifdef H5
			if (this.isClick) {
				this.dataList[this.k].state = 'pause'
				uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).pause()
				// audo.pause()
			}
			// #endif
			console.log('到后台')
		},
		methods: {
			handleTouchEnd() {
				// 如果手指收回，并且之前进行了长按，则执行操作
				if (this.isLongPress) {
					// 执行操作
					this.handleSetSpeedRate(1.0)
					this.isLongPress = false
					this.speedRate = 1.0
					let clickTimer = setTimeout(() => {
						this.speedNum = false
						clearTimeout(clickTimer)
					}, 2000)
				}
			},
			longpress(index) {
				console.log(index)
				this.speedRate = 2.0
				this.speedNum = true
				this.isLongPress = true
				this.handleSetSpeedRate(2.0)
				this.speedNum = true
			},
			showSpeedRate() {
				this.speedNum = true
			},
			handleSetSpeedRate(rate, msg) {
				uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).playbackRate(rate)
				this.speedRate = rate
				if (!msg) {
					uni.showToast({
						title: `x${rate}`,
						icon: 'none'
					})
				}
			},
			secondsToTime(seconds) {
				if (!seconds) {
					return 0
				}
				seconds = parseInt(seconds)
				const hours = Math.floor(seconds / 3600).toString().padStart(2, '0')
				const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0')
				const remainingSeconds = (seconds % 60).toString().padStart(2, '0')
				if (hours === '00:00') {
					return hours + ':' + minutes + ':' + remainingSeconds
				} else {
					return minutes + ':' + remainingSeconds
				}
			},
			mpTouchend() {
				this.mptime = (new Date() / 1000) - this.mpstartTime
			},
			mpTouchstart() {
				this.mpstartTime = (new Date() / 1000)
			},
			dealVoice() {
				uni.showToast({
					title: '处理声音',
					icon: 'none'
				})
			},
			clearToTime() {
				//清理定时器
				for (let i = 0; i < 20; i++) {
					clearTimeout(this.rotateTime)
					clearTimeout(this.xrotats)
					this.showPlay = false
					this.rotates = 0
				}
			},
			clearTime() {
				//清理定时器
				for (let i = 0; i < 20; i++) {
					clearTimeout(this.rotateTime)
					clearTimeout(this.xrotats)
				}
			},
			rotateX() {
				// clearTimeout(this.rotateTime);
				this.rotateTime = setTimeout(() => {
					this.rotateX()
					this.showPlay = true
					this.rotates += 1
				}, 30)
			},
			closeScrollview() {
				// 点击评论里面的叉叉，就会关闭评论
				this.$refs.pinglun.close()
			},
			ended() {
				// 1.播放当前视频结束时触发，自动切换下一个视频
				// this.current = this.k+1
			},
			// ---- 进度条相关 --- start
			touchstart(e) {
				// console.log(e);
				this.isTouch = true
				// #ifdef H5
				if (this.isClick) {
					this.addPositon = 0
					this.videoStartPositon = (this.windowWidth - (this.windowWidth * 0.10)) * this.progressBarPercent
					this.touchStartPosition = e.changedTouches[0].clientX
				}
				// #endif
				// #ifdef MP
				this.addPositon = 0
				this.videoStartPositon = (this.windowWidth - (this.windowWidth * 0.10)) * this.progressBarPercent
				this.touchStartPosition = e.changedTouches[0].clientX
				// #endif
			},
			touchmove(e) {
				// console.log(e);
				// #ifdef H5
				if (this.isClick) {
					let num = e.changedTouches[0].clientX - this.touchStartPosition
					if ((this.videoStartPositon + num) <= (this.windowWidth - (this.windowWidth * 0.10))) {
						this.addPositon = e.changedTouches[0].clientX - this.touchStartPosition
					} else {
						this.addPositon = 0
						this.videoStartPositon = (this.windowWidth - (this.windowWidth * 0.10))
					}
				}
				// #endif
			},
			touchend(e) {
				// #ifdef H5
				if (this.isClick) {
					let per = Number((this.videoStartPositon + this.addPositon) / (this.windowWidth - (this.windowWidth * 0.10)))
					let timeSubmit = parseInt(this.timeduration * per)
					// audo.seek(timeSubmit)
					// audo.play()
					uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).seek(timeSubmit)
					uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
					this.dataList[this.k].state = 'play'
					setTimeout(() => {
						this.isTouch = false
					}, 500)
				}
				// #endif
				// #ifdef MP
				let per = Number((this.videoStartPositon + this.addPositon) / (this.windowWidth - (this.windowWidth * 0.10)))
				let timeSubmit = parseInt(this.timeduration * per)
				// audo.seek(timeSubmit)
				// audo.play()
				uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).seek(timeSubmit)
				uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
				setTimeout(() => {
					this.isTouch = false
				}, 500)
				// #endif
			},
			timeupdate(event, index) {
				// 触发进度条更新
				// console.log(event,index);
				if (index === this.k) {
					this.timeduration = event.detail.duration
					this.progressBarPercent = parseFloat(Number(event.detail.currentTime / event.detail.duration))
					this.currentTime = event.detail.currentTime
				}
			},
			// ---- 进度条相关 --- ending
			//点击播放&&暂停
			tapVideoHover(state, event) {
				if(this.speedNum) {
					this.speedNum = false
					return
				}
				if (state == 'play' || state == 'continue') {
					this.dataList[this.k].state = 'pause'
				} else {
					this.dataList[this.k].state = 'continue'
				}
				if (this.dataList[this.k].state == 'continue') {
					this.isClick = true
					this.dataList[this.k].playIng = true

					setTimeout(() => {

						uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play() //暂停以后继续播放
					}, 500)
				}
				if (this.dataList[this.k].state == 'pause') {
					uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).pause() //暂停以后继续播放
					// #ifdef MP
					this.dataList[this.k].isplay = true
					// #endif
					// #ifdef H5
					// audo.pause()
					// #endif
				}
			},
			change(event) {
				this.k = event.detail.current
			},
			animationfinish(event) {
				// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
				if (this.k == this.dataList.length - 1) {
					this.GET()
				}
			},

			// 点赞
			handleLikes(id, index) {
				const obj = {
					episode_id: id,
					type: 'like'
				}
				this.$request('video.likes', obj)
					.then(res => {
						// if (res.code === 1) {
						if (this.dataList[index].like == 0) {
							this.dataList[index].like = 1
							this.dataList[index].likes++
						} else {
							this.dataList[index].like = 0
							this.dataList[index].likes--
						}
						// }
					})
			},
			// 收藏
			handleCollect(id, index) {
				if (this.dataList[index].favor == 0) {
					const obj = {
						vid: this.dataList[index].dramVideo.id,
						type: 'favorite'
					}
					console.log(JSON.stringify(obj))
					this.$request('video.addRecord', obj)
						.then(res => {
							// if (res.code === 1) {
							this.dataList[index].favor = 1
							this.dataList[index].dramVideo.favorites++
							// }
						})
				} else {
					const obj = {
						vid: this.dataList[index].dramVideo.id,
						type: 'favorite'
					}
					this.$request('video.addRecord', obj)
						.then(res => {
							// if (res.code === 1) {
							this.dataList[index].favor = 0
							this.dataList[index].dramVideo.favorites--
							// }
						})
				}
			},
			//每一组结束时新的请求
			GET() {

				this.$request('video.recommend', {
						current: this.pageNo,
						pageSize: 10
					})
					.then(res => {
						console.log(JSON.stringify(res))
						let msg = res.data.records
						for (let i = 0; i < msg.length; i++) {
							msg[i]._id = msg[i].id + ''
							msg[i].src = msg[i].video
							msg[i].state = 'pause'
							msg[i].isplay = true
							msg[i].playIng = false
							this.dataList.push(msg[i])
						}
						// setTimeout(() => {
						// 	this.$nextTick(() => {
						// 		console.log(this.$refs.uReadMore, 'this.$refs.uReadMore')
						// 		this.$refs.uReadMore[this.activeIndex].init()
						// 	})
						// }, 500)
						this.toVideoData = JSON.stringify(res.data.records.slice(0, 2))
					})
			},
			get() {
				// 1.这里引入后端请求数据
				// var msg = userList

				this.$request('video.recommend', {
						current: this.pageNo,
						pageSize: 10
					})
					.then(res => {
						let msg = res.data.records
						for (let i = 0; i < msg.length; i++) {
							msg[i]._id = msg[i].id + ''
							msg[i].src = msg[i].video
							msg[i].state = 'pause'
							msg[i].isplay = true
							msg[i].playIng = false
							this.dataList.push(msg[i])
						}
						if (this.k === -1) {
							this.k = 0
						}
						// 3.播放当前视频
						setTimeout(() => {
							this.isShow = true
							// #ifdef H5
							this.dataList[this.k].isplay = true
							// #endif
							this.dataList[this.k].playIng = true
							setTimeout(() => {
								// #ifdef H5

								// uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this)
								uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).seek(0)
								uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).pause()
								this.dataList[this.k].state = 'pause'
								// audo.src = this.dataList[this.k].video
								// #endif
							}, 500)
						}, 200)
						this.videoID = this.dataList[this.k]._id
					})

			},
			share() {
				uni.showToast({
					title: '分享',
					icon: 'none'
				})
			},
			toComment(index) {
				// 注意点击评论之后会执行这里
				/*
				（1）先加载缓冲
				（2）获取当前视频 ID 信息
				（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
					- 一定要记得看 index.vue 里面
					 uni.setStorageSync("user",this.peopleList[i]);
					 这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
					 记得写一下。
					 
				（4）打开评论
				*/
				uni.showToast({
					title: '加载中...',
					icon: 'none',
					position: 'bottom',
					duration: 300
				})
				uni.setStorageSync('videoID', this.dataList[index]._id)
				this.videoID = this.dataList[index]._id
				this.$refs.pinglun.open('bottom')
			},
			cLike(sss) {
				this.dataList[this.k].like = !this.dataList[this.k].like
				const video = this.dataList[this.k]
				sss ? video.like_n -= 1 : video.like_n += 1
			}
		}
	}
</script>

<style>
	.container {
		background-color: #000000;
	}

	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}

	.videoHover {
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		background-color: rgba(0, 0, 0, 0.1);
		justify-content: center;
		align-items: center;
		display: flex;
		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}

	.playState {
		width: 160rpx;
		height: 160rpx;
		opacity: 0.2;
	}

	.userInfo {
		position: absolute;
		bottom: 300rpx;
		right: 10rpx;
		flex-direction: column;
		display: flex;

	}

	.userAvatar {
		border-radius: 500%;
		margin-bottom: 15px;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
	}

	.userAvatar {
		width: 100rpx;
		height: 100rpx;
	}

	.likeIco,
	.shareIco,
	.commentIco {
		width: 60rpx;
		height: 60rpx;
		margin-top: 15px;
	}

	.likeNum,
	.commentNum,
	.shareTex {
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 5px;
	}

	.likeNumActive {
		color: red;
	}

	.content {
		width: 750rpx;
		z-index: 99;
		position: absolute;
		bottom: 60px;
		/* justify-content: center; */
		padding: 0 32rpx;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;
		display: flex;
		/* background-color: aqua; */
	}

	.userName {
		font-size: 30rpx;
		color: #ffffff;
		margin-top: 30rpx;
	}

	.words {
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
	}

	.root {
		background-color: #000000;
	}

	.like_box {
		text-align: center;
	}

	.iconListClass {
		justify-content: center;
		align-items: center;
		margin-top: 18rpx;
	}


	.duration_time {
		display: flex;
		flex-direction: row;
	}

	.description_text {
		margin-top: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.text {
		font-size: 24rpx;
		color: #fff;
		font-weight: 500;
	}

	.duration_time .in {
		color: #dadada;
		font-weight: 400 !important;
	}



	.formation {
		flex-direction: column;
		bottom: 10rpx;
		width: 750rpx;
		/* width: calc(100% - 80px); */
		display: flex;
	}


	.speedNumBox {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: rgba(0, 0, 0, .4);
		border-radius: 42rpx;
		width: 675rpx;
		height: 85rpx;
	}

	.speedNumBox .number {
		font-weight: 700;
		font-size: 28rpx;
		padding: 2rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.speedNumBox .active {
		color: #9B2EFC;
	}

	.speedNumBox .noActive {
		color: #fff;
	}
</style>